<template>
    <div id="choice-fun">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-form size="default" label-width="140px">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item :label="titleCon">
                            <el-select
                                filterable
                                v-model="choiceData"
                                multiple
                                collapse-tags
                                :placeholder="titleCon"
                            >
                                <el-option
                                    v-for="item in choiceOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="cancelUseClick">取消</el-button>
                <el-button type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref , computed , toRaw , watch } from 'vue';
import { ElButton, ElCol, ElDialog, ElForm, ElRow } from 'element-plus';
import { sysUserSelector , sysOrgList } from '/@/api/centerControl/pubilc';
import { 
    SMSDCRiskPartitionDeptBathaAddOrUpdate , 
    SMSDCRiskPartitionUserBathaAddOrUpdate ,
    // sysEmpSelectorByOrg , // 更具部门id数组获取对应员工数据
} from '/@/api/centerControl/sms';
export default defineComponent( {
    name: 'choice-fun',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        depObj: {
            type: Object,
            default: {}
        },
        userObj: {
            type: Object,
            default: {}
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const choiceData: any = ref();
        const choiceOptions: any = ref();
        const repeatDis = ref(false);

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            choiceData.value = '';
            choiceOptions.value = [];
            ctx.emit('cancelFunClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = async() => {
            let param:any = {};
            param.l_RiskPartitionId = JSON.parse(props.repairInfo).id;
            repeatDis.value = true;
            try{
                let res:any;
                if(JSON.parse(props.repairInfo).presentStatus === 'dep'){
                    param.l_DeptIds = toRaw(choiceData.value);
                    res = await SMSDCRiskPartitionDeptBathaAddOrUpdate(param);
                }else{
                    param.l_UsertIds = toRaw(choiceData.value);
                    res = await SMSDCRiskPartitionUserBathaAddOrUpdate(param);
                }
                if(res.success){
                    repeatDis.value = false;
                    ctx.emit('updateData');
                    ctx.emit('controlFunClick');
                }else{
                    repeatDis.value = false;
                    ctx.emit('controlFunClick');
                }
            }catch(error){ repeatDis.value = false; }
        }

        /*** getDataFun 获取组织架构数据 */
        const getDataFun = async () => {
            let param = {}
            let res:any;
            if(JSON.parse(props.repairInfo).presentStatus === 'dep'){
                res = await sysOrgList(param); // 获取组织架构列表
            }
            if(res.data.length !== 0){
                res.data.map((i: any) => {
                    i.id = Number(i.id);
                });
                choiceOptions.value = res.data;
            }
        }

        /*** 获取用户 */
        const getUserFun = async() => {
            // ids选择的组织架构数组
            let param: any = {};
            // param.OrgIds = ids;
            // let res: any = await sysEmpSelectorByOrg(param);
            let res: any = await sysUserSelector(param);
            if(res.success && res.data.length){
                // res.data.map((item: any) => {
                //     item.name = item.empName;
                // });
                choiceOptions.value = res.data;
            }
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                choiceOptions.value = [];
                if(JSON.parse(props.repairInfo).presentStatus === 'dep'){
                    titleCon.value = '选择分区部门';
                    if(Object.keys(props.depObj).length !== 0) choiceData.value = props.depObj.depArr;
                    getDataFun();
                }else{
                    titleCon.value = '选择分区排查人员';
                    // 根据选择的组织架构id数组获取对应的用户
                    // if(Object.keys(props.userObj).length !== 0 && props.userObj.userArr) choiceData.value = props.userObj.userArr;
                    // getUserFun(props.userObj.depArr);

                    // 查询所有用户
                    if(Object.keys(props.userObj).length !== 0) choiceData.value = props.userObj.userArr;
                    getUserFun();
                }
            }
        })



        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog;
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            titleCon,
            isUseDialog,
            choiceData,
            choiceOptions,
            repeatDis,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 50%!important;
}
:deep(.el-input){
    width: 100%;
}
</style>